// 变量
$bgColor:#888;
$color:(
    success:green,
    fail:red,
    warning:yellow
);
// 公共样式
@mixin wh {
    width: 200px;
    height: 200px;
}
@mixin whf($w:100px,$h:100px) {
    width: $w;
    height: $h;
}
// 嵌套
.content{
    width: 100px;
    height: 100px;
    background-color: $bgColor;
    p{
        width: 50px;
        height: 50px;
    }
}
.one{
    @include wh();
    background-color: $bgColor;
}
.two{
    @include whf(20px,20px);
    background-color: $bgColor;
}

// 循环 div p{}
@for $i from 1 through 5 {
    .col-#{$i}{
        width: $i/5*100%;
    }
}

// @if-@else
@mixin v-h($val:true) {
    @if $val {
        display: block
    }@else{
        display: block;
    }
}

// 继承@extend
.three{
    @extend .one;
    color:red;
}

// map
.btn{
    background-color: map-get($map: $color, $key:fail );
}

// 函数
@function color($key){
    @return map-get($map: $color, $key:$key)
}
.btn-two{
    background-color: color(success);
}